<template>
  <div class="list">
    <h3>商品列表</h3>

    <div v-for="prod in recommend" :key="prod.id">
      <span>{{ prod.id }}</span> -
      <span>{{ prod.title }}</span> -
      <span>{{ prod.price }}</span> -
      <button @click="handleAdd(prod)">加入购物车</button>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'pinia'
import useCartStore from '../store/shoppingcart'

const recommend = Array(8).fill(null).map((item, index) => ({
  id: index + 1,
  title: '商品标题' + (index + 1),
  price: 99.99,
}))

export default {
  name: 'List',
  data() {
    return {
      recommend,
    }
  },
  methods: {
    ...mapActions(useCartStore, ['addToCart']),
    handleAdd(goods) {
      // 将当前选购商品保存到 store 的 state 中
      this.addToCart(goods)
    },
  }
}
</script>

<style scoped>

</style>
